<template>
	<view>
		<view class="index_bg">
			<view class="user_name flex_dq" v-if="tokens">
				<view class="avatar">
					<image :src="userinfo.head_img" mode="aspectFill"></image>
				</view>
				<view class="user_box  flex_Z">
					<text class=" f28">{{userinfo.nickname}}</text>
					<view class="user_number flex_dq">
						<view class="bianhao flex_dq">
							<text>用户编号:</text>
							<text>{{userinfo.eth_address}}</text>
						</view>
						<image src="../../static/icon/i_copy.png" @click="isCopy(userinfo.eth_address)" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="brand_island_a">
			<swiper class="swiper_a" keyName="image_path" circular interval="3000" duration="500" previous-margin="10px"
				next-margin="20px">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper_box_a flex_c" @click="changeUrl(item.url)">
						<image :src="item.image_path" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="noticeBar" data-url="/pagesMy/setting/notice" @click="allJump">
			<u-notice-bar :text="notice" mode="link" bgColor="#29294C" fontSize="14" color="#666666"></u-notice-bar>
			<!-- <text class="more">更多</text> -->
		</view>
		<!-- NFT 模块 -->
		<view class="modele ">
			<view class="modele_box flex_ZC"  @click="scrapeoCar">
				<image :src="jgDistrict.carpooling_images" mode="aspectFill"></image>
				<text>全民拼车</text>
			</view>
			<view class="modele_box flex_ZC"  @click="pinPhone">
				<image :src="jgDistrict.pin_phone_images" mode="aspectFill"></image>
				<text>全民拼手机</text>
			</view>
			<view class="modele_box flex_ZC" data-url="/pagesMy/treasurebox/treasurebox" @click="allJump">
				<image :src="jgDistrict.box" mode="aspectFill"></image>
				<text>小福宝箱</text>
			</view>
			<view class="modele_box flex_ZC" @click="goDAO">
				<image :src="jgDistrict.school_images"  mode="aspectFill"></image>
				<text>学堂</text>
			</view>

			<!-- <view class="modele_box flex_ZC" data-url="/pagesMy/fightingCenter/userRanking" @click="allJump">
				<image :src="jgDistrict.power_ranking_images" mode="aspectFill"></image>
				<text>风云榜</text>
			</view> -->
			<view class="modele_box flex_ZC" data-url="/pagesMy/activityCenter/polymerizationActivity" @click="allJump">
				<image :src="jgDistrict.dynasty_images" mode="aspectFill"></image>
				<text>活动中心</text>
			</view>
			
		</view>
		<!-- 品牌岛 -->
		<view class="brand flex_Z" v-if="brandList.length != 0">
			<view class="brand_tit flex_ld">
				<view class="regional flex_dq">
					<text class="regional_name">多彩王朝</text>
					<text class="bg_circular"></text>
				</view>
				<view class="brand_tit_r flex_dq" data-url="/pagesMy/brandCenter/brandIsland" @click="allJump">
					<text class="f28 c4">更多</text>
					<image src="../../static/icon/i_y.png" mode=""></image>
				</view>
			</view>
			<!-- autoplay -->
			<view class="brand_island">
				<swiper class="swiper" circular previous-margin="60px" next-margin="60px" interval="3000"
					duration="500">
					<swiper-item class="flex_c" v-for="(item,index) in brandList" :key="index"
						@click="goBrandDetails(item.id)">
						<view class="swiper_box flex_c">
							<image class="golden_frame" src="../../static/image/bg8.png" mode="aspectFill"></image>
							<image class="swiper_box_img" :src="item.thumb" mode="aspectFill"></image>
						</view>
						<view class="dynasty_describe flex_Z">
							<view class="describe2 flex_dq">
								<view class="describe3 flex_c">
									<image :src="item.logo" mode="aspectFill"></image>
								</view>
								<view class="describe4 flex_Z">
									<text class="f24 c0 ">{{item.name}}</text>
									<text class="describe4_brand">{{item.brand_abbr}}</text>
								</view>
							</view>
							<view class="describe5 flex_dq">
								<text>{{item.brand_info}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- NFT藏品 -->
		<view class="collection flex_Z">
			<view class="collection_box marleft flex_dq">
				<text :class="index == inx2?'regional_name_a':'' " v-for="(item,index) in scList" :key="index"
					@click="changeFirst(index)">{{item}}</text>
				<!-- <text class="bg_circular_a"></text> -->
			</view>
			<view class="collection_nav flex_dq" v-if="inx2 == 1">
				<view class="nav_box flex_dq">
					<text :class="inx == 1 ?'active':''" @click="isToggle(1)">平台首发</text>
					<text :class="inx == 2 ?'active':''" @click="isToggle(2)">品牌首发</text>
				</view>
				<!-- <view class="mores flex_dq" @click="goPageNext">
					<text>更多</text>
					<image src="../../static/icon/i_y.png" mode=""></image>
				</view> -->
			</view>
			<view v-show="inx2 == 0">
				<view class="collect_info flex_dq">
					<view class="commodity_sell flex_Z" v-for="(item,index) in collectionList" :key="index"
						@click="goCollectDetails(item.id)">
						<image :src="item.images" mode="aspectFill"></image>
						<text>{{item.name}}</text>
						<view class="gives flex_c"  v-if="item.type ==5">
							<text class="">赠送</text>
							<image class="gives_img" src="../../static/image/fhyb.png" mode=""></image>
							<text>{{item.balance_hf || 0}}</text>
						</view>
						<view class="sign_box ">
							<view class="money_a flex_dq">
								<text class="fracture_txt" v-if="item.discount">折</text>
								<text>￥{{item.present_price}}</text>
								<text v-if="item.hasoption" style="font-size: 18rpx;margin-left: 4rpx;">起</text>
							</view>
							<view class="fracture flex_dq" v-if="item.discount">
								<text>￥{{item.discount_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<noDatas :xxxList="collectionList" :status="collectStatus"></noDatas>
			</view>
			<view v-show="inx2 == 1">
				<view v-show="inx == 1">
					<view class="NFT flex_ZC" v-for="(item,index) in NFTList" :key="index" @click="goDetails(item.id)">
						<image :src="item.goods_image" mode="aspectFill"></image>
						<text v-if="item.status != 1">{{item.status_desc}}</text>
						<text v-else> {{item.status_desc}} {{(item.start_time)}}</text>
						<view class="NFT_btm flex_dq">
							<view class="NFT_btm_l flex_dq">
								<image :src="item.brand_logo" mode=""></image>
								<text>{{item.brand_name}} </text>
							</view>

						</view>
						<view class="NFT_name flex_ld">
							<text>{{item.goods_name}}</text>
						</view>
						<view class="NFT_name flex_ld">
							<view class="NFT_btm_r flex_dq">
								<view class="sign flex_dq">
									<view class="sign_l flex_c">
										<text>系列</text>
									</view>
									<text>{{item.series_name}}</text>
								</view>
								<view class="sign flex_dq">
									<view class="sign_l flex_c">
										<text>限量</text>
									</view>
									<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
								</view>
							</view>
							<view class="money flex_dq">
								<image src="../../static/icon/i_money.png" mode=""></image>
								<text>{{item.price}}</text>
							</view>
						</view>
					</view>
					<noDatas :xxxList="NFTList" :status="nftStatus"></noDatas>
				</view>
				<view v-show="inx == 2">
					<view class="NFT flex_ZC" v-for="(item,index) in productList" :key="index"
						@click="goDetails2(item.id)">
						<image :src="item.goods_image" mode="aspectFill"></image>
						<text v-if="item.status != 1">{{item.status_desc}}</text>
						<text v-else> {{item.status_desc}} {{(item.start_time)}}</text>
						<view class="NFT_btm flex_dq">
							<view class="NFT_btm_l flex_dq">
								<image :src="item.brand_logo" mode=""></image>
								<text>{{item.brand_name}} </text>
							</view>

						</view>
						<view class="NFT_name flex_ld">
							<text>{{item.goods_name}}</text>
						</view>
						<view class="NFT_name flex_ld">
							<view class="NFT_btm_r flex_dq">
								<view class="sign flex_dq">
									<view class="sign_l flex_c">
										<text>系列</text>
									</view>
									<text>{{item.series_name}}</text>
								</view>
								<view class="sign flex_dq">
									<view class="sign_l flex_c">
										<text>限量</text>
									</view>
									<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
								</view>
							</view>
							<view class="money flex_dq">
								<image src="../../static/icon/i_money.png" mode=""></image>
								<text>{{item.price}}</text>
							</view>
						</view>
					</view>
					<noDatas :xxxList="productList" :status="platformStatus"></noDatas>
				</view>
			</view>
		</view>

		<view v-if="tokens">
			<view v-if="!closePop">
				<view v-if="!realName " class="authentication flex_ld"
					data-url="/pagesMy/setting/realNameAuthentication" @click="allJump">
					<text>实名认证后才能可以购买艺术作品</text>
					<view class="tishi flex_dq">
						<text>去认证</text>
						<image src="../../static/icon/i_clone.png" mode="" @click.stop="closePop = true"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- NFT藏品 -->
		<view class="empty2"></view>
	</view>
</template>
<script>
	import {
		fhIndex,
		getuserinfo,
		download
	} from "../../api/index.js";
	import {
		goodsList,
		hatchGoods,
	} from "../../api/store.js";
	import {
		messagesindex
	} from "../../api/setting.js"
	import {
		agreementImages
	} from "../../api/other.js"
	import {
		indexShopGoods,
	} from "../../api/shopp.js";
	import {judgeCar} from "../../api/mycar.js"
	import {inProgressPhone} from "../../api/myphone.js"
	import appUpdate from '@/uni_modules/leruge-app-update/js_sdk/leruge-app-update.js'
	import WebIM from "../../utils/WebIM.js"
	export default {
		data() {
			return {
				page: 1,
				page2: 1,
				page3: 1,
				size: 10,
				collectStatus: 'loadmore',
				nftStatus: 'loadmore',
				platformStatus: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				nums: '',
				num1: '',
				tokens: '',
				phoneJudge:false,//是否拼手机
				carJudge:false, //是否拼车
				inx: 1, //类型切换
				inx2: 0, //类型切换
				realName: 0, //是否实名
				closePop: false, //关闭实名弹窗
				notice: '', //公告/通知
				platform: '', //操作系统
				versionNumber: '', //应用版本
				bannerList: [], //轮播图
				brandList: [], //品牌岛
				NFTList: [], //NFT藏品
				productList: [], //自由市场
				collectionList: [], //王朝甄选
				userinfo: {}, //用户信息
				jgDistrict:{},//金刚区
				updateInfo: {}, //版本信息
				scList: ['王朝甄选', '王朝秘藏'],
				
			}
		},
		onLoad() {
			this.getimagelist()
			this.initCollection()
			this.initIndex()
		},
		onShow() {
			this.getuser()
			let tokens = uni.getStorageSync('token');
			this.tokens = tokens;
			if (tokens) {
				// this.getuser()
				this.getoverallNews()
				this.carTarget()
				this.phoneTarget()
				this.getgrouplist()
				// #ifdef APP
				uni.removeStorageSync("token")
				const systemInfo = uni.getSystemInfoSync();
				this.platform = systemInfo.platform;
				this.versionNumber = systemInfo.appWgtVersion;
				this.isDownload()
				// #endif
			}
		},
		methods: {
			// 查询是否已拼车
			carTarget() {
				judgeCar().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carJudge = res.data.member_carpool
					}
				})
			},
			// 查询是否已拼手机
			phoneTarget() {
				inProgressPhone().then(res => {
					console.log('手机----------',res);
					if (res.code == 1) {
						this.phoneJudge = res.data.member_phone
					}
				})
			},
			// 拼车入口
			scrapeoCar(){
				if(this.carJudge == -1){
					uni.navigateTo({
						url:'/pagesMy/nationalCarPooling/carPoolingIntroduce'
					})
				}else{
					 uni.navigateTo({
					 		url:'/pagesMy/nationalCarPooling/carIndex'
					})
				}
			},
			// 拼手机入口
			pinPhone(){
				if(this.phoneJudge == -1){
					uni.navigateTo({
						url:'/pagesMy/nationalPhonePooling/phonePoolingIntroduce'
					})
				}else{
					uni.navigateTo({
						url:'/pagesMy/nationalPhonePooling/phoneIndex'
					})
				}
				
			},
			getimagelist() {
				agreementImages().then(res => {
					// console.log(res)
					if(res.code == 1){
						this.jgDistrict = res.data
					}
				})
			},
			getgrouplist() {
				// uni.WebIM.conn.logOut().then(res=>{
				// 	console.log(res)
				// })

				uni.WebIM.conn.getServerConversations({
					pageSize: 50,
					cursor: ''
				}).then(res => {
					const data = {
						...res
					}
					// console.log("%c>>>会话列表", "color:#6ad1c7", data)
					// console.log("会话列表", res)
					this.nums = 0;
					this.group = data.data.conversations
					for (let i = 0; i < this.group.length; i++) {
						if (this.group[i].marks) {
							this.nums = 0
							this.group[i].unReadCount = 0
							return this.group
						} else {
							this.nums += this.group[i].unReadCount
						}

						// this.addlist.push(this.group[i].conversationId)
						// 将name和avatar一起push到新数组中

					}
					if (this.nums + this.num1 > 0) {
						uni.setTabBarBadge({
							index: 3,
							text: (this.nums + this.num1 > 99 ? '99+' : this.nums + this.num1).toString()
						})
					} else {
						uni.hideTabBarRedDot({
							index: 3,
						})
					}

					// console.log(this.nums)
				})
			},
			login() {
				let that = this
				var options = {
					user: that.userinfo.id.toString(),
					accessToken: that.userinfo.hx_im_token,
					appKey: uni.WebIM.config.appkey
				};
				// console.log(options, "登陆数据")
				uni.setStorageSync("hx_token", that.userinfo.hx_im_token)
				uni.WebIM.conn.open(options).then(res => {

				})
			},
			gozysc() {
				uni.switchTab({
					url: "/pages/index/incubationHall"
				})
			},
			// 版本信息
			isDownload() {
				download().then(res => {
					// console.log(res)
					if (res.code == 1) {
						// console.log(Number(res.data.is_update));
						this.updateInfo.platform = this.platform, //系统型号
							this.updateInfo.mainColor = 'AA8E6A', //按钮颜色
							this.updateInfo.version = res.data.version //版本号
						this.updateInfo.force = Number(res.data.is_update) //强制更新
						this.updateInfo.downUrl = res.data.download //下载地址
						this.updateInfo.updateContent = res.data.update_content, //更新内容信息
							this.compareVersion(this.updateInfo.version, this.versionNumber)
					}
				})
			},
			// 比较版本号
			compareVersion(version1, version2) {
				console.log('线上版本', version1);
				console.log('当前版本', version2);
				const num1 = parseInt(version1.replace(/\./g, ''));
				const num2 = parseInt(version2.replace(/\./g, ''));
				if (num1 < num2) {
					console.log("1小于2", num1, num2)
					return `${version1} 小于 ${version2}`;

				} else if (num1 > num2) {
					console.log("1大于2", num1, num2)
					appUpdate(this.updateInfo) // 更新
					return `${version1} 大于 ${version2}`;
				} else {
					return `${version1} 等于 ${version2}`;
				}
			},
			// 新消息角标
			getoverallNews() {
				messagesindex().then(res => {
					// console.log(res);
					if (res.code == 1) {
						this.num1 = Number(res.data.message_number)
						if (Number(res.data.message_number) > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: res.data.message_number
							})
						} else {
							uni.hideTabBarRedDot({
								index: 3,
							})
						}
					}
				})
			},
			// 初始化藏品列表
			initList() {
				let data = {
					page: this.page,
				};
				goodsList(data).then(res => {
					// console.log('品牌方', res);
					if (res.code == 1) {
						let list = res.data.data;
						this.NFTList = this.page == 1 ? list : this.NFTList.concat(list);
						// console.log(this.NFTList);
						if (list.length < this.size) this.nftStatus = 'nomore';
						else this.nftStatus = 'loading';
					}
				})
			},
			// 初始化王朝甄选列表
			initCollection() {
				let data = {
					page: this.page2,
					type: '',
					search_name: '',
					cateogry_id: '',
					is_recommend: 1,
				}
				indexShopGoods(data).then(res => {
					// console.log('9999999', res)
					if (res.code == 1) {
						let list = res.data.data;
						this.collectionList = this.page2 == 1 ? list : this.collectionList.concat(list);
						// console.log(this.collectionList);
						if (list.length < this.size) this.collectStatus = 'nomore';
						else this.collectStatus = 'loading';
					}
				})
			},
			// 初始化平台首发列表
			platformList() {
				let data = {
					page: this.page3,
				};
				hatchGoods(data).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page3 == 1 ? list : this.productList.concat(list);
						// console.log(this.productList);
						if (list.length < this.size) this.platformStatus = 'nomore';
						else this.platformStatus = 'loading';
					}
				})
			},
			// 轮播、列表 集成接口
			initIndex() {
				fhIndex().then(res => {
					// console.log('轮播', res)
					if (res.code == 1) {
						this.bannerList = res.data.banner_list
						this.brandList = res.data.brand_list
						if (res.data.article_list) {
							this.notice = res.data.article_list[0].title
						}
					}
				})
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.userinfo = res.data
						this.realName = res.data.is_real
						uni.setStorageSync('realName', res.data.is_real)
						let userDetail = {
							phone: res.data.phone_format,
							account: res.data.account,
							avatar: res.data.head_img,
						};
						if (res.data.is_pay) {
							uni.setStorageSync("ispay", res.data.is_pay)
						}
						uni.setStorageSync('userDetail', userDetail)
						if (!res.data.phone) {
							uni.reLaunch({
								url: '/pages/login/bindPhone?noPhpne=' + false
							})
						}
						this.login()
					}
				})
			},

			changeFirst(index) {
				console.log(index);
				this.inx2 = index
				if (this.inx2 == 0) {
					if (this.collectStatus != 'nomore') {
						this.initCollection()
					}
				} else {
					if (this.inx == 1) {
						if (this.nftStatus != 'nomore') {
							this.initList()
						}
					} else {
						if (this.platformStatus != 'nomore') {
							this.platformList()
						}
					}
				}
			},
			// 切换
			isToggle(index) {
				console.log(index);
				this.page = 1,
				this.inx = index
				if (this.inx == 1) {
					if (this.nftStatus != 'nomore') {
						this.initList()
					}
				} else {
					if (this.platformStatus != 'nomore') {
						this.platformList()
					}
				}
			},
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			// 去品牌主页
			goBrandDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/brandHomepage?id=' + id
				})
			},
			// 向下滚动
			goNFT() {
				uni.pageScrollTo({
					scrollTop: 850,
					duration: 200
				});
			},
			// 跳转页面
			changeUrl(url) {
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if (domain != -1) {
					var path = url.split('#');
					// console.log('1111', path[1])
					// console.log('2222',path[1].split("?")[0]);
					// console.log('3333',path[1].split("?")[1]);
					let urls = path[1]
					uni.navigateTo({
						url: urls
					})
				}
			},
			// 复制
			isCopy(id) {
				uni.setClipboardData({
					data: id,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			goDAO() {
				uni.navigateTo({
					url: '/pages/index/DAO'
				})
			},
			// 截取时间
			turnTimes(e) {
				let aa = e.slice(5);
				return aa;
			},
			// NFT藏品跳转
			goPageNext() {
				if (this.inx == 1) {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/collectionList'
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/brandFreeMarket'
					})
				}
			},
			// 商品详情
			goDetails(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pagesMy/mallCenter/productDetails?id=' + id
				})
			},
			// 商品详情
			goDetails2(id) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/brandDetails?id=' + id
				})
			},
			goCollectDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/shopDetails?id=' + id
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新', this.inx2, this.inx);
			let that = this;
			setTimeout(function() {
				if (that.inx2 == 0) {
					that.page2 = 1
					that.collectionList = []
					that.initCollection()
				} else {
					if (that.inx == 1) {
						that.page = 1
						that.NFTList = []
						that.initList()
					} else {
						that.page3 = 1
						that.productList = []
						that.platformList()
					}
				}
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.inx2 == 0) {
				if (this.collectStatus != 'nomore') {
					this.page2 = this.page2 + 1
					this.initCollection()
				}
			} else {
				if (this.inx == 1) {
					if (this.nftStatus != 'nomore') {
						this.page = this.page + 1
						this.initList()
					}
				} else {
					if (this.platformStatus != 'nomore') {
						this.page3 = this.page3 + 1
						this.platformList()
					}
				}
			}

		}
	}
</script>
<style>
	page {
		background: #E0DDDA;
	}
</style>
<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.index_bg {
		display: flex;
		align-items: center;
		width: 100%;
		height: 300rpx;
	}
	.avatar {
		width: 76rpx;
		height: 76rpx;
		margin: 0 24rpx 0 32rpx;
	}

	.avatar>image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.user_number {
		overflow: hidden;
		color: #666666;
		font-size: 20rpx;
	}

	.bianhao>text:nth-child(2) {
		width: 300rpx;
		overflow: hidden;
	}

	.user_number>image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}

	.swipers {
		width: 750rpx;
		height: 310rpx;
		transform: translateY(-70rpx);
	}

	.noticeBar {
		position: relative;
		width: 100%;
		height: 100rpx;
		transform: translateY(-20rpx);
	}

	/*  #ifdef  APP-ANDROID || APP-IOS */
	.more {
		position: absolute;
		top: 8rpx;
		right: 46rpx;
		font-size: 24rpx;
		color: #FF2CDF;
		background: #29294C;
		padding: 0rpx 10rpx 0rpx 20rpx;
	}

	/*  #endif  */
	/*  #ifdef  H5 ||WEB  */
	.more {
		position: absolute;
		top: 10rpx;
		right: 60rpx;
		font-size: 24rpx;
		color: #FF2CDF;
		background: #29294C;
		padding: 10rpx 10rpx 10rpx 20rpx;
	}

	/*  #endif  */

	.modele {
		width: 750rpx;
		display: flex;
		/* flex-wrap: nowrap; */
		justify-content: space-evenly;
		overflow-x: auto;
		/* background: pink; */
	}

	.modele_box {
		width: 150rpx !important;
		/* width: 750rpx; */
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.modele_box {
		/* width: 164rpx; */
		width: 150rpx;
		font-size: 30rpx;
		color: #666666;
		flex-shrink: 0;
	}

	.modele_box>text {
		margin-top: 6rpx;
	}

	.modele_box>image {
		width: 110rpx;
		height: 110rpx;
	}

	.brand {
		width: 100%;

	}

	.brand_tit {
		width: 100%;
		margin-top: 60rpx;
		padding: 0 20rpx;
	}


	.regional {
		position: relative;
		font-size: 36rpx;
	}

	.marleft {
		margin-left: 20rpx;
		color: #999999;
	}

	.regional>text {
		margin-right: 60rpx;
		font-family: iconfont2;
		font-size: 44rpx;
		color: #262626;
	}

	.collection_box {
		/* margin-right: 60rpx; */
		font-size: 36rpx;
		color: #262626;
	}

	.collection_box>text {
		color: #999999;
		margin-right: 60rpx;
	}

	.regional_name {
		z-index: 8;
	}

	.regional_name_a {
		z-index: 8;
		font-weight: 700;
		color: #333333 !important;
	}

	.bg_circular {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.bg_circular_a {
		position: absolute;
		top: -18rpx;
		left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.brand_tit_r {
		font-size: 28rpx;
		color: #B8A185;
	}

	.brand_tit_r>image {
		width: 32rpx;
		height: 34rpx;
		margin-right: 2rpx;
	}

	.brand_island {
		width: 100%;
		height: 600rpx;
		margin: 30rpx 0;
	}

	.swiper {
		width: 100%;
		height: 600rpx;
	}

	.swiper_box {
		position: relative;
		width: 450rpx;
		height: 450rpx;
		line-height: 446rpx;
		text-align: center;
	}

	.golden_frame {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
	}

	.swiper_box_img {
		position: absolute;
		top: 10rpx;
		left: 0;
		width: 100%;
		height: 96%;
		border-radius: 100rpx;
		z-index: 8;
	}

	.dynasty_describe {
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 450rpx;
		height: 198rpx;
		z-index: 10;
		background: url(../../static/image/bg10.png);
		background-size: 100% 100%;
	}

	.describe2 {
		width: 100%;
		margin: 10rpx auto;
	}

	.describe3 {
		margin: 10rpx 30rpx 0 20rpx;
	}

	.describe3>image {
		width: 83rpx;
		height: 83rpx;
		border-radius: 50%;
	}

	.describe4_brand {
		font-size: 18rpx;
		color: #ffffff;
		background: #BF9F73;
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}

	.describe5 {
		width: 92%;
		margin: 8rpx auto 0;
		font-size: 20rpx;
		color: #ffffff;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.collection {
		width: 100%;
		margin: 30rpx 0 0;
	}

	.collection>text {
		font-family: iconfont2;
		font-size: 44rpx;
		color: #262626;
		margin-left: 30rpx;
	}

	.collection_nav {
		width: 100%;
		margin-top: 30rpx;
		color: #ffffff80;
		font-size: 28rpx;
	}

	.nav_box {
		width: 80%;
		margin-left: 20rpx;
	}

	.nav_box>text {
		font-size: 32rpx;
		color: #999999;
		margin-right: 80rpx;
	}

	.active {
		color: #8C7554 !important;
		font-weight: 700;
	}

	.mores {
		margin-right: 24rpx;
	}

	.mores>image {
		width: 32rpx;
		height: 34rpx;
	}


	.NFT {
		position: relative;
		width: 690rpx;
		background: #B8A185;
		border: 2rpx solid #B8A185;
		margin: 40rpx auto;
		border-radius: 40rpx;
		padding-bottom: 10rpx;
	}

	.NFT>image {
		width: 650rpx;
		height: 650rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.NFT>text {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #66553D;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 0 20rpx 0 0;
	}

	.NFT_btm {
		width: 100%;
		/* background: pink; */
		margin-top: 32rpx;
	}

	.NFT_btm_l {
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 20rpx;
	}

	.NFT_btm_l>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.sign {
		font-size: 22rpx;
		background: #ae9674;
		border-radius: 10rpx;
		color: #ffffff;
		padding-right: 20rpx;
		margin-right: 10rpx;
	}

	.sign_l {
		color: #ffffff;
		font-size: 22rpx;
		width: 60rpx;
		padding: 4rpx 0 6rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: #997F5C;
	}

	.sign>text {
		margin-left: 10rpx;
		padding-bottom: 2rpx;
	}

	.NFT_name {
		width: 100%;
		color: #ffffff;
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.NFT_name>text:nth-child(1) {
		margin-left: 20rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.NFT_btm_r {
		margin-left: 20rpx;
	}
	.gives{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background: #00000080 !important;
		font-size: 20rpx !important;
		color: #ffffff !important;
		text-align: center;
		padding: 10rpx 10rpx;
		border-radius: 0 20rpx 0 0;
		z-index: 10;
	}
	.gives_img{
		width: 26rpx;
		height: 18rpx;
		margin: 0 4rpx;
	}
	.money {
		color: #ffffff;
		font-size: 42rpx;
		font-family: iconfont2;
		margin-right: 32rpx;
	}

	.money>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.money_a {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #3D3D3D;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}

	.money_a>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.fracture_txt{
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: #A68A64;
		border-radius:  10rpx;
		color: #ffffff;
		font-size: 24rpx;
		background: #A68A64;
		padding: 4rpx 6rpx;
	}
	.fracture{
		font-size: 24rpx;
		color: #999999;
		text-decoration-line: line-through;
	}
	.sign_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 10rpx;
	}

	.authentication {
		position: fixed;
		/* #ifdef H5 */
		bottom: var(--window-bottom);
		/* #endif */

		/* #ifdef APP */
		bottom: 0;
		/* #endif */
		left: 50%;
		width: 690rpx;
		height: 70rpx;
		background: #F2EFEC;
		margin: 0 auto;
		border-radius: 10rpx 10rpx 0 0;
		font-size: 24rpx;
		color: #333333;
		padding: 0 10rpx;
		transform: translateX(-50%);
		z-index: 12;
	}

	.tishi>text:nth-child(1) {
		width: 122rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #A68A64;
		color: #ffffff;
		border-radius: 40rpx;
	}

	.tishi>image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.submit {
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 40rpx;
		margin: 50rpx auto 0;
	}

	.brand_island_a {
		width: 100%;
		height: 308rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		transform: translateY(-70rpx);
	}

	.swiper_a {
		width: 750rpx;
		height: 306rpx;
	}

	.swiper_box_a {
		position: relative;
		width: 670rpx;
		height: 310rpx;
		text-align: center;
		background: #00000025;
		border-radius: 30rpx;
		margin: 0 20rpx;
	}

	.swiper_box_a>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 30rpx;
	}

	.collect_info {
		display: flex;
		flex-wrap: wrap;
		/* justify-content:flex-start; */
		justify-content: space-between;
		width: 92%;
		margin: 30rpx auto;
	}


	.commodity_sell {
		position: relative;
		width: 330rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 12rpx 0rpx;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 330rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}



	/deep/.u-icon__icon {
		color: #BA9B70 !important;
	}

	/deep/.u-notice-bar {
		background: #BA9B7020 !important;
	}
</style>